<template>
	<div class="channel-Search">
		<Search @search="handleSearch" placeholder="搜索频道"></Search>
		<!-- 这个封装的组件是侧边栏上频道搜索框的组件，所以placeholder可以直接写成“频道搜索” -->
	</div>
</template>


<script>
	import Search from './search'  //导入了search组件
	export default {
		components: {
			Search
		},
		methods: {
			handleSearch(e) {
				// 这里的e是接收到search.vue传过来的值，也就是input中输出搜索的值，并将其打印出来测试
				console.log("执行了一次搜索", e)
			}
		},
	}
</script>

<style scoped>
	.channel-Search {
		width: 100%;
		/* 使其能够充满父容器 */
		height: 34px;
		/* 搜索框的高度 */
		box-sizing: border-box;
		/* 使元素的padding和边框的和为父容器的100%，宽高设置为100%以后不会出现超出范围的情况 */
		padding: 0 18px;
		/* 元素的padding上下为0，左右为18px */
		margin: 18px 0;
		/* 元素的marging属性上下为18px，左右为0 */
	}
</style>
